import { View, Text, Image } from 'react-native'
import { useState } from 'react'
import { Link } from 'expo-router'
import { ScrollView } from 'react-native-gesture-handler'
import { SafeAreaView } from 'react-native-safe-area-context'
import FormField from '../../components/FormField'

import { images } from '../../constants'

import CustomButton from '../../components/CustomButton'

const SignIn = () => {
  const [form, setForm] = useState({
    email: '',
    password: ''
  })
  const [isSumbitting, setIsSubmitting] = useState(false)
  const submit = ()=>{

  }
  return (
    <SafeAreaView className="bg-primary h-full">
      <ScrollView>
        <View className="w-full justify-center h-full px-4 my-6">
          <Image source={images.logo} style={{ with: "115px", height: "35px" }} resizeMode='contain' />
          <Text className="text-2xl mt-10 font-psemibold text-semibold text-white">Log in to Aora</Text>
          <FormField
            title="Email"
            value={form.email}
            handleChange={(text) => setForm({ ...form, email: text })}
            otherStyles="mt-7"
            keyboardType="email-address"
          />

          <FormField
            title="Password"
            value={form.password}
            handleChange={(text) => setForm({ ...form, password: text })}
            otherStyles="mt-7"
          />
          <CustomButton 
            title="Sign In"
            handlePress={submit}
            containerStyle="mt-7"
            isLoading={isSumbitting}
          />
          <View className="justify-center pt-5 flex-row gap-2">
            <Text className=" text-gray-100 font-pregular">Don't have an account?</Text>
            <Link href="/sign-up" className="text-sm font-psemibold text-secondary">Sign Up</Link>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

export default SignIn